<template>
  <div style="background: #FE9A51;height: 100vh;">
    <c-title :hide="false" text="点位"></c-title>
    <div class="top-body">
      <div class="userinfo">
        <div class="userinfo-left">
          <div class="userinfo-left-top">
            <div style="font-size: 1.3rem;">{{userinfo.nickname}}</div>
            <div>/</div>
            <div>{{ userinfo.level_name }}</div>
          </div>
          <!-- <div>注册时间:2024-11-09 17:35:11</div> -->
        </div>
        <img class="userinfo-avatar" :src="userinfo.avatar" alt="">
      </div>
      <div style="border-radius: 10px;
    overflow: hidden;
    margin: 1rem;">
        <div class="top">
        <div class="item" @click="godistribution()">
          <div class="item-point">{{ zt_num }}</div>
          <div class="item-text">直推粉丝</div>
        </div>
        <div class="item">
          <div class="item-point">{{ td_num }}</div>
          <div class="item-text">团队粉丝</div>
        </div>
        <div class="item" @click="gobalance()">
          <div class="item-point">{{ yue }}</div>
          <div class="item-text">当前余额</div>
        </div>
      </div>
      <div class="top">
        <div class="item">
          <div class="item-point">{{ yx_zt_num }}</div>
          <div class="item-text">直推有效粉丝</div>
        </div>
        <div class="item">
          <div class="item-point">{{ yx_td_num_num }}</div>
          <div class="item-text">团队有效粉丝</div>
        </div>
        <div class="item">
          <div class="item-point">{{ fy }}</div>
          <div class="item-text">累计返佣</div>
        </div>
      </div>
      </div>
     
      
    </div>
    
    <div class="list_box">
      <!--  -->
      <div class="list"  v-for="(item, index) in new_content" :key="index">
        <div class="list-top" >
          <div class="title">第{{item.area}}区</div>
          <!-- <div class="amount">升级金额：{{ item.order_price }}</div> -->
          <div class="button" @click="golist(item.id)">查看记录</div>
        </div>
        <div class="list-botton">
          下单时间：{{ fun.timestampToTime(item.create_time) }}
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      new_content: [],
      //加载更多
      isLoadMore: false,
      total_page: 0,
      page: 1,
      userinfo:JSON.parse(localStorage.getItem('userinfo')),
      fy: "",
      td_num: "",
      yue: "",
      yx_td_num_num: "",
      yx_zt_num: "",
      zt_num: "",
    }
  },
  mounted() {
    this.search()
    this.getData();
    console.log(this.$store)
  },
  methods: {
    gobalance(){
      
      this.$router.push(this.fun.getUrl('balance'))
    },
    godistribution(){
      this.$router.push(this.fun.getUrl('distribution'))
    },
    golist(val){
      this.$router.push(this.fun.getUrl('teamlist',{},{dwid:val}))
    },
    getData(){
      let that = this;
      $http.post('member.member.memberInfos', {}, "").then(function (response) {
        if (response.result === 1) {
          console.log(response.data)
          that.fy = response.data.fy
          that.td_num = response.data.td_num
          that.yue = response.data.yue
          that.yx_td_num_num = response.data.yx_td_num_num
          that.yx_zt_num = response.data.yx_zt_num
          that.zt_num = response.data.zt_num
        } else {
          console.log(response.msg);
        }
      }, function (response) {
        // error callback
      });
    },
    search() {
      let that = this;
      this.isLoadMore = true;
      this.page = 1;
      this.total_page = 0;
      let json = {
        "page": this.page,
        "current_page": this.page,
      };
      $http.post('member.member-xj.qydwlist', json, "").then(function (response) {
        if (response.result === 1) {
          that.new_content = [];
          that.new_content = response.data;
          that.total_page = response.data.last_page;
          that.page = response.data.current_page;

        } else {
          console.log(response.msg);
        }
      }, function (response) {
        // error callback
      });
    },
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.top-body{
  background: linear-gradient(#FE9A51,#FE9A51);
  text-align: left;
  // padding: .325rem;
  .userinfo{
    padding: .825rem;
    display: flex;
    color: #fff;
    .userinfo-left{
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      font-size: 1rem;
      .userinfo-left-top{
        display: flex;
        
        align-items: center;
        gap: .5rem;
      }
    }
    .userinfo-avatar{
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
    }
  }
  .top {
  padding: 1rem 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .item-point {
      font-size: 1rem;
      // font-weight: bold;
    }

    .item-text {
      font-size: 0.825rem;
      font-weight: 500;
    }
  }
}
}

.list_box{
  padding: 1rem 1rem;
  background: #FE9A51;
  .list {
    text-align: left;
    padding: .825rem 1rem ;
    border-radius: .825rem;
    background: #fff;
    margin-bottom: 10px;
    .list-top{
      position: relative;
      .title{
        // font-weight: bold;
        font-size: 1rem;
      }
      .amount{
        font-size: 1rem;
      }

      .button{
        border-radius: .825rem;
        background: #f15353;
        color: #fff;
        font-size: 1rem;
        position: absolute;
        right: 0;
        top: 0;
        padding: .125rem .325rem;
      }
    }
    .list-botton{
      margin-top: 5px;
      color: #999;
    }
  }
}


</style>